<%--
  Created by IntelliJ IDEA.
  User: lzy
  Date: 18-9-3
  Time: 下午2:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Login</title>
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>
    <%-- 1.导入jquery
    2. 获取name=“username"的节点：username
    3. 为username添加change响应函数
    3.1. 获取username的value属性值，取出前后空格不为空，准备发送ajax请求
    3.2. 发送ajax请求检验username是否可用
    3.3. 在服务端直接返回一个html片段
    3.4. 在客户浏览器把其直接添加到#message的html中--%>

    <script type="text/javascript">
        $(function () {
            $(":input[name='username']").change(function () {
                var val = $(this).val();
                val = $.trim(val);

                if (val !== "") {
                    var url = "${pageContext.request.contextPath}/validateUserName";
                    var args = {"username": val, "time": new Date()};

                    $.post(url, args, function (data) {
                        $("#message").html(data);
                    });
                }
            });
        })
    </script>
</head>
<body>
<form action="" method="post">
    UserName:<input type="text" name="username"/>
    <br/>
    <div id="message"></div>
    <br/>
    <input type="submit" value="submit"/>
</form>
</body>
</html>
